<template>
  <div class="app-container">
    <el-container>
      <el-header class="main-header">
        <div class="logo">
          <img src="https://element-plus.org/images/element-plus-logo.svg" alt="Logo" class="logo-image">
          <span class="logo-text">AI 智能助手</span>
        </div>
        <el-menu
          mode="horizontal"
          router
          :ellipsis="false"
          class="main-menu"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#409EFF">
          <el-menu-item index="/">
            <el-icon><House /></el-icon>首页
          </el-menu-item>
          <el-menu-item index="/tutorial">
            <el-icon><Reading /></el-icon>教程
          </el-menu-item>
          <el-menu-item index="/about">
            <el-icon><InfoFilled /></el-icon>关于我们
          </el-menu-item>
          <el-menu-item index="/login" class="login-item">
            <el-icon><User /></el-icon>登录
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
      <app-footer v-if="$route.path !== '/chat'" />
    </el-container>
  </div>
</template>

<script>
import { House, Reading, InfoFilled, User } from '@element-plus/icons-vue'
import AppFooter from './components/AppFooter.vue'

export default {
  name: 'App',
  components: {
    House,
    Reading,
    InfoFilled,
    User,
    AppFooter
  }
}
</script>

<style>
.app-container {
  min-height: 100vh;
}

.main-header {
  background-color: #001529;
  padding: 0;
  display: flex;
  align-items: center;
  height: 64px !important;
}

.logo {
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: white;
}

.logo-image {
  height: 40px;
  margin-right: 10px;
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
}

.main-menu {
  flex: 1;
  border: none;
}

.login-item {
  float: right !important;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.el-main {
  padding: 20px;
  min-height: calc(100vh - 64px - 280px);
  background-color: #f5f7fa;
}
</style> 